<template>
	<div class="whrent">
		<myheader :title="title"></myheader>
		<router-link to="/user/search">
			<div class="search">
				<div class="img"><img src="../../../static/lxb/search.png" /></div>
				<div class="txt">请输入商圈或小区名称</div>
			</div>
		</router-link>
		<div class="install">
			<div class="in-left">保存搜索条件，获取最新房源</div>
			<div class="in-center">安装app</div>
			<div class="in-right"><img src="../../../static/lxb/nav.png" /></div>
		</div>
		<div class="de-list" v-for="item in data">
			<router-link :to="{path:'/lideta/mydetails',query:{id:item.house_id}}"><div class="de-img"><img v-bind:src="'http://106.13.72.24:81/house/public/static/uploads/'+item.img1" /></div>
			<div class="de-pro">
				<div class="pro-one">北滨路大三房，太阳台，住家装修，一线江景，诚信出售</div>
				<div class="pro-two">{{item.house_type}}/{{item.house_size}}㎡/{{item.house_direction}}/东方港湾</div>
				<div class="pro-three"><span>140万</span> 10725元/平</div>
			</div>
			</router-link>
		</div>
		
		<router-link to="/user">
			<div class="news" style="box-shadow: 0 0 10px darkgray; border:1px solid gainsboro">
				<img src="../../../static/lxb/im@2x.png" />
			</div>
		</router-link>
		<div class="clik" @click="getData">{{state}}</div>
	</div>

</template>

<script>
	import myheader from '@/components/public/myheader'
	import choice from '@/components/public/choice'

	export default {
		name: "addre",
		data() {
			return {
                state:'点击加载更多',
				title: '',
				type: '',
				data: "",
				page:1,
				last_page:0
			}
		},
		mounted: function() {
			//判读是否登陆了
			if(localStorage.getItem("nameid") == null || localStorage.getItem("nameid") == undefined || localStorage.getItem("nameid") == "") {
				this.$router.push({
					name: 'login'
				});
			} else {
				var values = this.$route.query.values;
				var idx = this.$route.query.idx;
				var datax = {
				       values: values,
				       idx:idx
				      
			         };
				var _this = this;
				_this.axios.post(_this.ajaxUrl + '/api/addre/finds', _this.qs.stringify(datax)).then(function(res) {
					_this.data = res.data.data;
				}).catch(function(err) {
					console.log(err);
				})
			}
		},
		components: {
			myheader,
			choice

		},
		methods: {
			back() {
				this.$router.go(-1);

			},
			  getData(){
                     var values = this.$route.query.values;
                     var idx = this.$route.query.idx;
				var datax = {
				       values: values,
				         idx:idx
			         };
				var _this = this;
                     	_this.axios.post(_this.ajaxUrl+ '/api/addre/finds?page='+_this.page, _this.qs.stringify(datax)).
                     	then(function(res){
	                     	for(var i=0;i<res.data.data.length;i++){
								_this.data.push(res.data.data[i]);
							}
	                     	if(_this.page%3==0){
	                     		_this.state="没有更多了"
	                     	}
	                     	_this.page++;
	                     
                     	}).catch(function(err){
                     		console.log(err)
                     	})
                     	
                     	
                     }
		}
	}
</script>

<style scoped="scoped">
	.search {
		width: 7rem;
		height: 0.6rem;
		margin: auto;
		background: #e8e8e9;
		margin-top: 0.3rem;
	}
	
	.img {
		width: 0.32rem;
		height: 0.33rem;
		float: left;
		margin-top: 0.1rem;
		margin-left: 0.2rem;
	}
	
	.img>img {
		width: 100%;
		height: 100%;
	}
	
	.txt {
		width: 5rem;
		height: 0.3rem;
		float: left;
		font-size: 0.12rem;
		color: #808897;
		margin-top: 0.1rem;
	}
	
	.nav-list {
		width: 7rem;
		height: 1rem;
		margin: auto;
		display: flex;
		justify-content: space-around;
		margin-top: 0.2rem;
	}
	
	.nav-list>div {
		width: 1.25rem;
		height: 0.6rem;
		text-align: center;
		line-height: 0.6rem;
		font-size: 0.26rem;
	}
	
	.install {
		width: 7rem;
		height: 0.9rem;
		margin: auto;
		border-bottom: 1px solid #e8e8e9;
	}
	.clik {
		width: 3rem;
		height: 0.6rem;
		text-align: center;
		line-height: 0.6rem;
		margin: auto;
		border-radius: 0.1rem;
		/*background: gainsboro;
		border: 1px dashed darkgray;*/
		color: gray;
		font-size: 0.16rem;
		display: block;
	}
	
	.in-left {
		width: 4rem;
		height: 0.4rem;
		line-height: 0.4rem;
		font-size: 0.2rem;
		float: left;
		margin-top: 0.2rem;
	}
	
	.news {
		width: 0.8rem;
		height: 0.7rem;
		border-radius: 50%;
		text-align: center;
		line-height: 1rem;
		position: fixed;
		top: 10rem;
		left: 6rem;
		background: white;
		z-index: 999;
	}
	
	.news>img {
		width: 0.5rem;
		height: 0.5rem;
	}
	
	.in-center {
		width: 1.2rem;
		height: 0.5rem;
		float: left;
		border: 2px solid #cfdefc;
		border-radius: 0.1rem;
		text-align: center;
		line-height: 0.5rem;
		font-size: 0.26rem;
		color: #2a6ef6;
		margin-top: 0.1rem;
		margin-left: 0.9rem;
	}
	
	.in-right {
		width: 0.2rem;
		height: 0.3rem;
		float: right;
		margin-top: 0.2rem;
	}
	
	.in-right>img {
		width: 100%;
		height: 100%;
	}
	
	.de-list {
		width: 7.05rem;
		height: 2.45rem;
		float: right;
	}
	
	.de-img {
		width: 1.95rem;
		height: 1.5rem;
		float: left;
		margin-top: 0.30rem;
	}
	
	.de-img>img {
		width: 100%;
		height: 100%;
	}
	
	.de-pro {
		width: 4.1rem;
		height: 1.5rem;
		float: left;
		margin-top: 0.3rem;
		margin-left: 0.25rem;
	}
	
	.pro-one {
		width: 4.1rem;
		height: 0.7rem;
		font-size: 0.26rem;
	}
	
	.pro-two {
		width: 4.1rem;
		height: 0.3rem;
		font-size: 0.12rem;
		color: #b8b8b8;
		line-height: 0.3rem;
		margin-top: 0.1rem;
	}
	
	.pro-three {
		width: 4.1rem;
		height: 0.3rem;
		font-size: 0.12rem;
		color: #b8b8b8;
		margin-top: 0.1rem;
	}
	
	.pro-three>span {
		color: red;
		font-size: 0.26rem;
	}
	
	.other {
		width: 7rem;
		height: 0.3rem;
		text-align: center;
		line-height: 0.3rem;
		float: left;
		margin-top: 0.2rem;
		font-size: 0.2rem;
		color: #7e95aa;
	}
</style>